<template>
  <div>
    <m-header :addressName="addressName"></m-header>
    <m-swiper :foodsLis="foodsLis"></m-swiper>
    <m-items :shopLis="shopLis"></m-items>
  </div>
</template>

<script>
import MHeader from '../components/msite/m-header'
import MItems from '../components/msite/m-items.vue'
import MSwiper from '../components/msite/m-swiper'
// 引入接口
import { reqAdress, reqFoodLis, reqShopLis } from '../api/index'
export default {
  data() {
    return {
      // 维度
      latitude: 40.10038,
      // 经度
      longitude: 116.36867,
      // 存储地址
      addressName: '',
      // 存储商品地址
      foodsLis: [],
      // 存储附近商铺
      shopLis: []
    }
  },
  components: {
    MHeader,
    MSwiper,
    MItems
  },
  methods: {
    // 获取头部数据
    async getAsress() {
      const res = await reqAdress(this.latitude + ',' + this.longitude)
      if (res.code === 0) {
        this.addressName = res.data.name
      }
    },
    //  2、获取食品分类列表
    async getGoodsLis() {
      const res = await reqFoodLis()
      if (res.code === 0) {
        this.foodsLis = res.data
      }
    },
    // [3、根据经纬度获取商铺列表](#3根据经纬度获取商铺列表)<br/>
    async getShopLis() {
      const res = await reqShopLis()
      if (res.code === 0) {
        this.shopLis = res.data
      }
    }
  },
  mounted() {
    // 获取头部数据
    this.getAsress()
    // 获取商品食品列表
    this.getGoodsLis()
    // 获取商铺列表
    this.getShopLis()
  }
}
</script>
<style lang="less" scoped></style>
